<template>
  <PageWrapper title="引导页" content="用于给用户的指引操作">
    <a-button type="primary" @click="handleStart">开始</a-button>
  </PageWrapper>
</template>
<script lang="ts">
  import { defineComponent } from "vue";
  import { PageWrapper } from "/@/components/general/Page";
  import { useDesign } from "/@/hooks/web/UseDesign";
  import intro from "intro.js";
  import "intro.js/minified/introjs.min.css";

  export default defineComponent({
    components: { PageWrapper },
    setup() {
      const { prefixVar } = useDesign("");

      function handleStart() {
        intro()
          .setOptions({
            nextLabel: "下一步",
            prevLabel: "上一步",
            doneLabel: "立即体验",
            steps: [
              {
                title: "欢迎",
                intro: "欢饮使用摸鱼低代码平台! 👋"
              },
              {
                title: "菜单",
                element: document.querySelector(`.${prefixVar}-layout-sider-wrapper`)!,
                intro: "这是一个菜单栏"
              },
              {
                title: "折叠按钮",
                element: document.querySelector(`.${prefixVar}-layout-header-trigger`)!,
                intro: "这是一个菜单折叠按钮"
              },
              {
                title: "用户功能",
                element: document.querySelector(`.${prefixVar}-layout-header-action`)!,
                intro: "这是用户功能区域"
              }
            ]
          })
          .start();
      }

      return { handleStart };
    }
  });
</script>